<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音视频通话简易DEMO</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <div class="container m-auto">
    <div class="row">
      <div class="col-12 col-md-6">
        <video class="w-100 mw-100 my-4 shadow bg-dark" autoplay playsinline id="local-video"></video>
      </div>
      <div class="col-12 col-md-6">
        <video class="w-100 mw-100 my-4 shadow bg-secondary" autoplay playsinline id="remote-video"></video>
      </div>
    </div>
    <form action="" onsubmit="return false">
      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="">hostname</label>
          <input type="text" class="form-control" id="hostname" value="webrtc-roman-slb.zego.im">
        </div>
        <div class="form-group col-md-4">
          <label for="">app</label>
          <input type="text" class="form-control" id="app" value="zegoroman">
        </div>
        <div class="form-group col-md-4">
          <label for="">stream</label>
          <input type="text" class="form-control" id="stream" value="teststream">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="exampleFormControlSelect1">编码</label>
          <select class="form-control" id="videoCodeType">
            <option value="H264">H264</option>
            <option value="VP8">VP8</option>
            <option value="VP9">VP9</option>
          </select>
        </div>
        <div class="form-group col-md-6">
          <label for="">音频码率</label>
          <input type="text" class="form-control" id="audioBitrate" value="48000">
        </div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="takeSdp" checked>
            获取 node 节点是否携带 sdp
          </label>
        </div>
      </div>
      <div class="form-group" id="form-key">
        <label for="">key：（鉴权时需要，由服务端和客户点提前约定好）</label>
        <input type="text" class="form-control" id="key" placeholder="由服务端和客户点提前约定好" value="]E5C115382F41CAF5EFC7D411C4806548">
      </div>
      <button class="btn btn-primary" id="setup">参数设置</button>
      <button class="btn btn-primary" id="publish">推流</button>
      <button class="btn btn-primary" id="play">拉流</button>
      <button class="btn btn-secondary" id="stop">停止推流</button>
      <div class="alert alert-warning mt-4" role="alert">
        请先点击【设置参数】，然后再执行推拉流
      </div>
    </form>
  </div>
</body>
<script src="./js/adapter-latest.js"></script>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/md5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"></script>
<script src="./index.js"></script>
<script>
  var vConsole = new VConsole();
</script>
</html>